<template>
  <view class="contenter">
    <view class="order">
      <view class="orderTop">
        <view class="top u-flex">
          <u-image :src="`/static/icon/store.png`"  :height="37" :width="37" :fade="false"></u-image>
          <view class="name">{{data.user.store_name}}</view>
        </view>
        <view class="bottom">
          <view class="u-flex">
            <u-icon name="account"  color="#45806E" size="28"></u-icon>
            <view class="name">{{data.user.nickname}}</view>
          </view>
          <view class="u-flex">
            <u-icon name="phone"  color="#45806E" size="28"></u-icon>
            <view class="name">{{data.user.mobile}}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="h5">服务详情：</view>
        <view class="item flex" v-for="(data,index) in data.goods">
          <view>
            <item-image :img="data.image" :height="200" :width="200"></item-image>
          </view>
          <view class="flex_bt flex flex-column detail">
            <view class="name">{{data.name}}</view>
            <view class="con text-overflow">{{data.describe}}</view>
            <view class="flex_bt u-flex">
              <view class="price">￥{{data.price}}</view>
              <view class="num">x{{data.num}}</view>
            </view>
          </view>
        </view>
        <view class="item flex" v-for="(data,index) in data.giveaway">
          <view>
            <item-image :img="data.image" :height="200" :width="200"></item-image>
          </view>
          <view class="flex_bt flex flex-column detail">
            <view class="name">{{data.name}}</view>
            <view class="con text-overflow">{{data.describe}}</view>
            <view class="flex_bt u-flex">
              <view class="price">￥0</view>
              <view class="num">x{{data.num}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bt" @click="xiadan">帮Ta下单</view>
    </view>
    <modal-item v-if="show" :item="'下单成功'" @submit="submit" @close="close"></modal-item>
  </view>
</template>

<script>
import ModalItem from "../../components/item/modalItem";
export default {
  name: "index",
  components: {ModalItem},
  data(){
    return{
      option:{},
      data:{},
      form:{},
      show:false
    }
  },
  onLoad(option){
    this.data = JSON.parse(option.data)
    this.data.user.mobile = this.phone(this.data.user.mobile)
    this.form = JSON.parse(option.form)
  },
  methods:{
    close(){
      this.show = false
    },
    //回到首页
    submit(){
      uni.switchTab({
        url:'/pages/store/index',
      })
    },
    // 下單
    xiadan(){
      this.$api.orderSubmit(this.form).then(res=>{
        this.show = true
        uni.removeStorage({
          key: 'zengpin',
        });
      })
    },
  },
}
</script>

<style scoped lang="scss">
.order{
  padding: 32rpx;
  .orderTop{
    width: 100%;
    height: 220rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    .top{
      width: 100%;
      height: 96rpx;
      background: $uni-color-primary;
      opacity: 1;
      border-radius: 12rpx 12rpx 0px 0px;
      padding: 0 32rpx;
      .name{
        color: white;
        font-size: 28rpx;
        margin-left: 16rpx;
      }
    }
    .bottom{
      width: 100%;
      padding: 0 32rpx;

      .u-flex{
        font-size: 24rpx;
        color: $uni-text-color;
        margin-top: 20rpx;
        .name{
          margin-left: 16rpx;
        }
      }
    }
  }
  .content{
    background: white;
    padding: 20rpx 30rpx;
    border-radius: 12rpx;
    .item{
      border-bottom: 2rpx solid #F2F2F2;
      padding: 20rpx 0;
      &:last-child{
        border-bottom: 0;
      }
    }
    .h5{
      font-size: 28rpx;
      color: #4B4B4B;
      margin-bottom: 20rpx;
    }
    .detail{
      margin-left: 20rpx;
      width: 398rpx;

    }
    .name{
      font-size: 36rpx;
      font-weight: bold;
      color: #3B3B3B;
    }
    .con{
      font-size: 28rpx;
      color: #3B3B3B;
    }
    .price{
      color: $uni-color-price;
      font-size: 42rpx;
    }
    .num{}

  }
  .bt{

    margin: 40rpx auto;

  }
}
</style>